<template>
    <div class="circle-item-box">
        <div @click="circleDetail(item)"  v-if="circleList.length >= 1" class="circle-item" v-for="(item, index) in circleList" :key="index" >
            <img :src="item.imgUrl" alt="">
            <div class="circle-item-intro">
                <h3>{{item.circleName}}</h3>
                <p>
                    <span class="real-name"><img :src="item.imgUrl" alt="">{{item.realName}}<a class="circle-item-more"></a></span>
                </p>
                <p class="discribe"><span >{{item.introduce}}</span></p>
                <!-- <span class="circle-item-initgrade">买入阶段：{{item.buyStatusStr}}</span>
                <span class="circle-item-initgrade" style="margin-left:.3rem;">当前阶段：{{item.statusStr}}</span> -->
            </div>
        </div>
        <div class="no-circle-box" v-if="circleList.length < 1">
            <img src="../../../assets/img/no-data-show.png" alt="">
            <p>暂无数据</p>
        </div>
    </div>
</template>
<script>
export default {
    props: ['circleList'],
    data () {
        return {
        }
    },
    methods: {
        circleDetail(item) {
            let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
           this.$router.push({path: '/circleDetail', query: {pid: item.cid, agentId: info.agentId, status: item.buyStatus, isHaveBuy: 1}})
        }
    }
}
</script>

<style lang="less" scoped>
    .circle-item {
        padding: 0.3rem;
        border-bottom: 1px solid #ccc;
        img {
            width: 1.5rem;
            height: 1.5rem;
            float: left;
            border-radius: .05rem;
        }
        .circle-item-intro {
            margin-left: 1.8rem;
            color: #282828;
            font-size: 0;
            h3 {
                font-size: 0.32rem;
                font-weight: normal;
            }
            .real-name {
                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-right: 5px;
                }
            }
            .discribe {
                width: 95%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            p {
                font-size: 0.26rem;
                margin-top: 0.2rem;
                a {
                    color: #282828;
                    float: right;
                    &::after {
                        content: '';
                        display: inline-block;
                        width: 0.12rem;
                        height: 0.2rem;
                        background: url(../../../assets/img/next-icon.png) no-repeat;
                        background-size: 100%;
                        margin-left: 0.15rem;
                    }
                }
            }
            .circle-item-initgrade {
                color: #282828;
                font-size: 0.24rem;
                display: inline-block;
                margin-top: 0.15rem;
            }
        }
    }
    .no-circle-box {
        text-align: center;
        font-size: 0;
        img {
            width: 3.43rem;
            margin-top: 1.2rem;
        }
        p {
            color: #282828;
            font-size: 0.3rem;
            margin-top: 0.7rem;
        }
    }
</style>
